<template>
	<div id="historyPath" class="list" :class="{noselect:speedselect!==null}" >
		<div class="map" :class="{'fullScreen':isFullScreen}">

			<div class="map-top">
				<ul>
					<li style="width:120px;"><DriverComplete :value="driverId" :selected="selectedCar" :multiple='false' :label-in-value="true" @on-change="changeCar"></DriverComplete></li>
					<li>
						<DatePicker type="date" v-model="stime" @on-change="changeStime" :options="{disabledDate}" placeholder="选择时间" style="width:110px;"></DatePicker>
						<DatePicker type="date" v-model="etime" :disabled="!stime" :options="{disabledDate:etimeDisabled}" placeholder="选择时间" style="width:110px;"></DatePicker>
					</li>
					<li>
						<Button type="primary" class="search-btn":disabled="!driverId||!stime||!etime" icon="search" @click="loadPath" >查询</Button>
					</li>
				</ul>
			</div>

			<div class="map-left" :class="{'off':!isLeftopen}" :style="{height:`${mapHeight-30-34-46}px`}">
				<div class="title">
					<div class="tigger" >
						<Button type="primary" @click="changeLeftOpen">关闭</Button>
					</div>
					<span class="fa fa-cog"></span><span>地图设置</span>

				</div>
				<div class="left-content" :style="{height:`${mapHeight-20-30-35-15-44}px`}">
					<!-- <div class="set-item">
						<div class="set-title">
							<p>生成线路</p>
						</div>
						<div class="set-content"  style="padding:30px 10px 15px 10px;">
							<span>线路设置模式</span>
							<i-switch size="large" v-model="isPathset" style="float:right" :disabled="!(selectPath&&selectPath.gps.length)">
					        <span slot="open">开启</span>
					        <span slot="close">关闭</span>
					    </i-switch>
						</div>
					</div> -->
				<!-- 	<div class="set-item">
						<div class="set-title">
							<p>播放速度设置</p>
						</div>
						<div class="set-content" style="padding:30px 10px 15px 10px;">
							<Slider v-model="payspeed" :max="10" @on-change="changeSpeed" show-input></Slider>
						</div>
					</div> -->
					<div class="set-item">
						<div class="set-title">
							<p>显示设置</p>
						</div>
						<div class="set-content" style="padding:20px 10px 15px 10px;">
							<Checkbox v-model="isShowSpeed">速度曲线</Checkbox>
							<Checkbox v-model="isShowStop">违章信息</Checkbox>
							<Checkbox v-model="isShowEvent">驾驶行为</Checkbox>
						</div>
					</div>
					<div class="set-item" v-if="false">
						<div class="set-title">
							<p>速度设置</p>
						</div>
						<div class="set-content speed-set">
							<div class="speed-slider">
				    		<div style="background:#7d7afb;" @mousedown='speedmousedown($event,0)'  :style="{width:`${speedWidth(speedbar[0])}px`}">
				    			<i :class="{selected:lastspeedselect===0}"><b>{{speedbar[0]}}km/h</b></i>
				    		</div>
				    		<div style="background:#5dd856;"  @mousedown='speedmousedown($event,1)' :style="{width:`${speedWidth(speedbar[1]-speedbar[0])}px`}">
				    			<i :class="{selected:lastspeedselect===1}"><b>{{speedbar[1]}}km/h</b></i>
				    		</div>
				    		<div style="background:#f81b25;" :style="{width:`${speedWidth(150-speedbar[1])}px`}"></div>
					    </div>
						   <ul class="speed-slider-scale">
						   		<li>
						   			<span>0</span>
						   			<em>30</em>
						   		</li>
						   		<li><em>60</em></li>
						   		<li><em>90</em></li>
						   		<li><em>120</em></li>
						   		<li><em>150</em></li>
						   </ul>
						</div>
					</div>

				</div>


			</div>

			<div class="speed-chart-div" v-show="selectPath&&selectPath.gps.length&&isShowSpeed&&!isPathset">
				<div class="speed-chart-close" @click="closeSpeedBar"><Icon type="close-circled"></Icon></div>
				<div id="speed-chart"></div>
			</div>
			<div class="map-bottom" v-if="selectPath&&selectPath.gps.length" key="historypath-map-bottom">

				<div class="play-bar" v-if="!isPathset" >
					<ul class="tools">
						<li class="stop" title="停止" @click="resetPath"><Icon type="stop"></Icon></li>
						<li class="play" title="播放" @click="playPath">
							<Icon v-if="!isPlay" type="play"></Icon>
							<Icon v-else type="pause"></Icon>
						</li>
					</ul>
					<ul class="mapset">
						<li >
							<Button type="error" @click="changePayspeed(payspeed-1)">慢</Button>
							<span style="width: 40px;">{{payspeed}}</span>
							<Button type="success" @click="changePayspeed(payspeed+1)">快</Button>
						</li>
						<li ><Button type="primary" @click="changeLeftOpen"><i class="fa fa-cog"></i>地图设置</Button></li>
					</ul>

					<Slider v-model="playbarValue" :max="playbarMax" @on-input="toPtah" show-tip="never"></Slider>
				</div>
				<div class="pathset-bar" v-if="isPathset">
					<ul>
						<li><label >选择轨迹：</label></li>
						<li>
							<Slider v-model="pathsetbar" :max="playbarMax" @on-change="changePathset" show-tip="never" range></Slider>
						</li>
						<li><Button type="primary" @click="openModel" >保存</Button></li>
						<li><Button  @click="changeIsPathset" >取消</Button></li>
					</ul>
				</div>
			</div>

			<div class="map-right" v-if="selectPath&&!isPathset" :class="{closeRight:!isRightopen}" isPathset  @click="changeRightOpen(true)" key="historypath-map-right">
				<div class="path-info">
					<Tabs v-model="selectTab" size="small">
			        <TabPane label="基本信息" name="tab1">
			        	<div class="info">
			        		<p>
			        			<label >{{selectPath.driverRtVo.driverName}}</label>
			        			<span>({{selectPath.driverRtVo.tel}})</span>
			        		</p>
			        		<p>
			        			<label >轨迹里程：</label>
			        			<span>{{selectPath.driverStatVo===null||selectPath.driverStatVo.mileage===null?'--':selectPath.driverStatVo.mileage/1000}}KM</span>
			        		</p>
			        		<p>
			        			<label >行驶时长：</label>
			        			<span>{{selectPath.driverStatVo===null||selectPath.driverStatVo.duration===null?'--':time(selectPath.driverStatVo.duration,1)}}</span>
			        		</p>
									<p style="margin-top: 60px;">
										<label >步行轨迹</label>
										<span class="inline" style="display: inline-block;width: 60px;height: 10px;background: #3AFF20;"></span>
									</p >
										<label >驾车轨迹</label>
										<span class="inline" style="display: inline-block;width: 60px;height: 10px;background: #7d7afb;"></span>
									</p>
			        	</div>
			        </TabPane>
			        <TabPane label="违章信息" :disabled="!isShowStop" name="tab2" >
			        	<div class="stoplist">
			        		<table>
			        			<thead>
			        				<tr>
			        					<th style="width:50px;">序号</th>
			        					<th>违章行为</th>
			        					<th>违章时间</th>
			        				</tr>
			        			</thead>
			        		</table>
			        		<div class="list-warp">
				        		<table>
				        			<tbody>
				        				<tr v-for="(v,i) in selectPath.peccancyVos" @click="selectStops(v)" :key="`hp-stoplist-key-${i}`" :class="{selected:v.id === selectSAitem}">
				        					<td style="width:50px;">{{i+1}}</td>
				        					<td>{{v.act}}</td>
				        					<td>{{moment(v.date).format('MM/DD HH:mm:ss')}}</td>
				        				</tr>
				        			</tbody>
				        		</table>
				        	</div>
			        	</div>
			        </TabPane>
			        <TabPane label="驾驶行为" :disabled="!isShowEvent" name="tab3" key="showevent-tab3">
			        	<div class="eventlist">
			        		<table>
			        			<thead>
			        				<tr>
			        					<th style="width:50px;">序号</th>
			        					<th>事件类型</th>
			        					<th>发生时间</th>
			        				</tr>
			        			</thead>
			        		</table>
			        		<div class="list-warp">
			        			<table >
				        			<tbody>
				        				<tr v-for="(v,i) in selectPath.driveAlarmVos" :key="`hp-eventlist-key-${i}`" :class="{selected:v.id === selectSAitem}" @click="selectAlarms(v)">
				        					<td style="width:50px;">{{i+1}}</td>
				        					<td>{{typestr[v.type-1]}}</td>
				        					<td >{{moment(v.startTime).format('MM/DD HH:mm:ss')}}</td>
				        				</tr>
				        			</tbody>
				        		</table>
			        		</div>

			        	</div>
			        </TabPane>
			    </Tabs>
			    <Button type="text" class="right-btn" @click.stop="changeRightOpen(!isRightopen)"><Icon type="chevron-up"></Icon></Button>
				</div>
			</div>


			<div id="historymap" :style="{height:isFullScreen?'100%':`${mapHeight}px`}">
			</div>

			<Spin size="large" fix v-if="isPathLoading"></Spin>
		</div>

		<Modal v-model="modal" @on-visible-change="resetForm" title="设置线路" width="500">
			<div class="form-content" style="min-height:50px;">
				<Form v-if="false" ref="form" :model="oform" :label-width="85" :rules="rules">
					<Row :gutter="32">
						<Col :md="20" offset="1">
							<FormItem label="线路名称" prop="routeName">
	            	<Input v-model="oform.routeName" placeholder="输入线路名称" style="width:100%;"></Input>
	       			</FormItem>
						</Col>
					</Row>
				</Form>
				<Spin size="large" fix v-if="false"></Spin>
			</div>
			<div slot="footer">
        <Button  @click="closeModal">取消</Button>
        <Button type="primary" :loading="false" @click="submit">保存</Button>
    	</div>
		</Modal>

	</div>
</template>

<style lang="less" src="@/assets/styles/historyPath.less"></style>
<script>
	import {mapActions,mapState} from 'vuex'
	import moment                from 'moment'
	import config                from '@/config'
	import unit                  from '@/util/unit'
	import Map                   from '@/plugin/Map'
	import Mappath               from '@/plugin/Map/Mappath'
	import {getAddress}          from '@/plugin/Map/Mapaddress'
	import Mappathset            from '@/plugin/Map/Mappathset'
	import Mapwindow             from '@/plugin/Map/Mapwindow'
	import storage               from '@/util/storage'
	import Highcharts from 'highcharts/highstock'

	let map,mappath,mappathset,chart,imgsm;

	export default {
		data() {
			return {
				typestr:['急加速','急减速','左转弯','右转弯','超速','疲劳驾驶'],
				driverId:null,
				zoom:11,
        filterCar:"",
        dateOpen:false,
        isPlay:false,
        isFullScreen:false,
        isLeftopen:false,
        isRightopen:true,
        stime:null,
        etime:null,
        plateNumOptions: [],
				plateNumLoading: false,
				playbarValue:0,
				selectPath:null,
				selectTab:'tab1',
				speedpx:null,
				isShowSpeed:true,
				isShowStop:true,
				isShowEvent:true,
				isShowWeilan:true,
				isShowImg:true,
				speedbar:[7,300],
				speedselect:null,
				lastspeedselect:storage.get('speedSelect')||0,
				payspeed:5,
				isPathset:false,
				pathsetbar:[],
				selectPathaddr:[],
				selectSAitem:null,
				modal:false,
				oform:{},
				rules:{
					routeName:{required: true, message: '线路名必填', trigger: 'change' },
				},
				plateNumer:''
			}
		},
		watch:{
			pathdata(data){
				this.playbarValue = 0;

				if(!data || !data.gps || data.gps.length <= 0){
					this.selectPath = null;
					map.clearMap();
					if(mappath){
						this.resetPath();
						mappath.remove();
					}

					if(mappathset){
						mappathset.reset();
					}

					this.$Modal.warning({
            title: '提示',
            content: `“司机${this.plateNumer}，在${moment(this.stime).format('YYYY-MM-DD')}至${moment(this.etime).format('YYYY-MM-DD')}”期间无历史轨迹可查,请选择其他时间查询！`
          });
				}else{
					this.selectPath = data;
					this.createCharts(data.gps.map((a,i)=>[i,a.gpsSpeed]));
					this.createPath(data);
				}
			},

			isShowStop(v){
				mappath.stopslist.forEach(a=>{
					if(v){
						a.allshow();
					}else{
						this.selectTab = 'tab1'
						a.allhide();
					}
				});
			},
			isShowEvent(v){
				mappath.alarmslist.forEach(a=>{
					if(v){
						a.allshow();
					}else{
						this.selectTab = 'tab1'
						a.allhide();
					}
				});
			},
			isShowWeilan(v){
				mappath.fenceslist.forEach(a=>{
					if(v){
						a._objGroup.show();
					}else{
						a._objGroup.hide();
					}
				});
			},
			isPathset(v){
				if(v){
					this.isLeftopen = false;
					this.changePathset([0,this.pathdata.gps.length]);
				}else{
					this.createPath(this.selectPath);
				}
			},
			isShowImg(v){
				if(v){
					imgsm.forEach(a=>{
						a.show();
					})
				}else{
					imgsm.forEach(a=>{
						a.hide();
					})
				}
			},
			isPlay(v){
				// map.setStatus({
				// 	resizeEnable:!v,
				// 	dragEnable:!v,
				// 	zoomEnable:!v,
				// 	doubleClickZoom:!v,
				// 	keyboardEnable:!v
				// });
			},
			size(v){
				if(chart){
					chart.setSize()
				}
			},
			isShowSpeed(v){
				if(v&&chart){
					this.$nextTick(()=>{
						chart.setSize()
					});
				}
			}
		},
		mounted(){

			// historymap

			// 带参跳转
			let query = this.$route.query;
			if (Object.keys(query).length > 0) {
				this.driverId = query.driverId;
				this.plateNumer = query.plateNumber;
				this.stime = query.sTime;
				this.etime = query.eTime;
				if(this.stime&&this.etime&&this.driverId)
					this.loadPath();
			}

			map = new Map('historymap', {
				    resizeEnable: true,
				    zoom:this.zoom,
				    center: [116.40, 39.91]
				});
			window.addEventListener('keydown',e=>{
				if(e.keyCode === 27&&this.isFullScreen){
					this.fullScreen();
				}
			});
			window.addEventListener('mousemove',this.speedmousemove);
			window.addEventListener('mouseup',this.speedmouseup);

		},
		destroyed(){
			window.removeEventListener('mousemove',this.speedmousemove);
			window.removeEventListener('mouseup',this.speedmouseup);
		},

		computed:{
			...mapState('base',['size']),
			...mapState('history',['pathList','carlist','isListLoading','isPathLoading','pathdata']),
			playbarMax(){
				return this.pathdata.gps?this.pathdata.gps.length-1:1;
			},
			pathListFilter(){
				return this.pathList.filter(v=>v.plateNumber.indexOf(this.filterCar)>-1);
			},
			mapHeight(){
				return this.$store.state.base.size.height-15*2-50;
			},
			stopTime(){
				let s = 0;
				this.selectPath.stops.forEach(v=>{
					s += v.stopDuration||0;
				});
				 ;
				return s;
			},
			sjTimes(){
				return this.selectPath.alarms.filter(v=>
					['71228a38caee11e4935b00163e0046c9','74f9ba5acaee11e4935b00163e0046c9','7d100c1fcaee11e4935b00163e0046c9'].indexOf(v.alarmTypeId)>-1
				).length
			},
			fatigueDrivingTimes(){
				return this.selectPath.alarms.filter(v=>v.alarmTypeId==='8a022d1acaee11e4935b00163e0046c9').length
			},
			selectedCar(){
				let query = this.$route.query;
				let selected = null;
	      if (Object.keys(query).length > 0) {
					if (query.driverId && query.plateNumber){
						selected = {id:query.driverId,plateNumber:query.plateNumber};
					}
	      }
				return selected;
			}
		},
		methods:{
			moment,
			time:unit.time,
			...mapActions('history',['reloadList','reloadPath']),
			fullScreen(){
				this.isFullScreen = !this.isFullScreen;
				if(this.isFullScreen){
					this.$Notice.info({
              title: '按 ESC 键退出全屏'
          });
				}
				this.$nextTick(()=>{
					if(chart)
						chart.setSize()
				});
			},
			closeSpeedBar(){
				this.isShowSpeed = false;
			},
			createCharts(data){
				chart = new Highcharts.Chart('speed-chart',{
					chart : {
						backgroundColor : 'rgba(255,255,255,0)',
						height : 75
					},
					colors : [ "#02c2d7" ],
					tooltip : {
						formatter : function() {
							return '<b>' + this.y + 'km/h</b>';
						}
					},
					yAxis : {
						min : 0,
						tickPixelInterval : 10,
						gridLineWidth : 0,
						title : {
							enabled : false
						},
						plotLines : [ {
							color : 'red',
							dashStyle : 'Solid',
							width : 1.5,
							value : this.speedbar[1],
							zIndex : 5,
							label : {
								text : '超速值',
								style : {
									color : 'red',
									fontWeight : 'bold'
								}
							}
						} ],
						labels : {
							style : {
								color : '#02c2d7',
							}
						}
					},
					xAxis : {
						visible:false,
						labels : {
							enabled : false
						},
						lineColor: '#02c2d7',
						tickColor: '#02c2d7'
					},
					title : {
						text : ""
					},
					legend : {
						enabled : false
					},
					credits : {
						enabled : false
					// 去除版权信息
					},
					series : [ {
						type : 'line',
						name : 'Observations',
						data : data,
						point:{
							events:{
								click:(e)=>{
									this.playbarValue = e.point.index;
									this.toPtah(e.point.index)
									// mappath.car.infowindow.show();
								}
							}
						}
					} ]
				});
			},
			async changePathset(v){
				v[1] = v[1]>this.playbarMax?this.playbarMax:v[1];
				this.pathsetbar = v;
				if(v){
					this.resetPath();
				}
				let s = this.pathdata.gps[v[0]];
				let e = this.pathdata.gps[v[1]];
				let addres = await getAddress([[s.lng,s.lat],[e.lng,e.lat]]);
				this.selectPathaddr = addres.map(v=>v.formattedAddress);
				let data = {gps:[...this.pathdata.gps].slice(v[0],v[1]+1)};
				this.createPathset(data);
			},
			selectStops(v){
				if(!v.lng)return ;
				if(this.isPlay)return;
				if(this.selectSAitem&&mappath.stopsObjs[this.selectSAitem])
					mappath.stopsObjs[this.selectSAitem].marker.marker.setzIndex(100);
				mappath.stopsObjs[v.id].marker.marker.setzIndex(170);
				mappath.stopsObjs[v.id].show();
				mappath.stopsObjs[v.id].center();
				this.selectSAitem = v.id;
			},
			selectAlarms(v){
				if(this.isPlay)return;
				if(this.selectSAitem&&mappath.alarmsObjs[this.selectSAitem])
					mappath.alarmsObjs[this.selectSAitem].marker.marker.setzIndex(100);
				mappath.alarmsObjs[v.id].marker.marker.setzIndex(170);
				mappath.alarmsObjs[v.id].show();
				mappath.alarmsObjs[v.id].center();
				this.selectSAitem = v.id;
			},
			createPath(data){
				map.clearMap();
				if(mappath){
					this.isPlay = false;
					mappath.car.reset();
					mappath.remove();
				}
				if(mappathset){
					mappathset.reset();
				}
				mappath = new Mappath({map,gps:data.gps,info:data.historyTrajectoryDriveLoopVo,alarms:data.driveAlarmVos,fences:data.elecFenceAndLocs,stops:data.stops});

				if(!this.isShowStop){
					mappath.stopslist.forEach(a=>{
							a.allhide();
					});
				}
				if(!this.isShowEvent){
					mappath.alarmslist.forEach(a=>{
							a.allhide();
					});
				}
				if(!this.isShowWeilan){
					mappath.fenceslist.forEach(a=>{
							a._objGroup.hide();
					});
				}
				if(!this.isShowImg){
					imgsm.forEach(a=>{
						a.hide();
					});
				}


				mappath.car.on("moving",(gps,i)=>{
					if(this.isPlay)this.playbarValue = i;
					chart.series[0].setData(this.pathdata.gps.slice(0,i+1).map((a,i)=>[i,a.gpsSpeed]))
					if(this.pathdata.gps.length-1 === this.playbarValue){
						this.isPlay = false;
					}
				});

				mappath.car.speed = this.payspeed;
			},
			createPathset(data){
				map.clearMap();
				if(mappath){
					mappath.remove();
				}

				if(mappathset){
					mappathset.reset();
				}
				mappathset = new Mappathset({map,data:data.gps});
				let start = new Mapwindow({
		      map:map,
		      showClose:false,
		      position:[data.gps[0].lng,data.gps[0].lat],
		      width:290,
        	isShow:true,
        	zIndex:162
		    });
		    start.setHtml(`<div style="width:290px">地址:${this.selectPathaddr[0]}</div>`);
		    let end = new Mapwindow({
		      map:map,
		      showClose:false,
		      position:[data.gps[data.gps.length-1].lng,data.gps[data.gps.length-1].lat],
		      width:290,
        	isShow:true,
        	zIndex:162
		    });
		    end.setHtml(`<div style="width:290px">地址:${this.selectPathaddr[1]}</div>`);
			},
			speedWidth(v){
				console.log(v);
				return v/150*220;
			},
			speedmousedown(e,i){
				this.speedselect = i;
				this.lastspeedselect = i;
			},
			speedmouseup(e){
				if(this.speedselect !== null){
					this.speedpx = null;
					this.speedselect = null;
					storage.set('speedRange',this.speedbar);
					storage.set('speedSelect',this.lastspeedselect);
					if(mappath){
						map.clearMap();
						this.createPath(this.pathdata);
						this.createCharts(chart.series[0].data.map(v=>[v.x,v.y]));
					}
				}
			},
			speedmousemove(e){
				if(this.speedselect!==null){
					if(this.speedpx){
						let s = [...this.speedbar];
						if(this.speedpx<e.clientX){
							s[this.speedselect]+= parseInt((e.clientX - this.speedpx)/(200/150));
							this.speedpx = e.clientX;
						}else if(this.speedpx>e.clientX){
							s[this.speedselect]-= parseInt((this.speedpx - e.clientX)/(200/150));
							this.speedpx = e.clientX;
						}
						if(this.speedselect)
							s[1] = s[1]<s[0]?s[0]:s[1]>150?150:s[1];
						else
							s[0] = s[0]<0?0:s[0]>s[1]?s[1]:s[0];
						this.speedbar = s;
					}else{
						this.speedpx = e.clientX;
					}
				}
			},
			changeStime(v){
				let max = moment(moment().subtract(1,'days').format('YYYY-MM-DD')).toDate();
				let value = moment(v,'YYYY-MM-DD').add(6, 'd').toDate();
				max = value > max ? max : value;
				this.etime= moment(max);
			},
			disabledDate(v){
				return v.getTime()>=moment(moment(Date.now()).format('YYYY-MM-DD 00:00:00'),'YYYY-MM-DD HH:mm:ss').toDate().getTime();
			},
			etimeDisabled(v){
				if(!this.stime)return true;
				return this.disabledDate(v)||v.getTime()<this.stime.getTime()||moment.duration(v.getTime()-this.stime.getTime(),'ms').asDays()>6;
			},
			loadPath(v){
				this.reloadPath({stime:moment(this.stime).format("YYYY-MM-DD"),etime:moment(this.etime).format("YYYY-MM-DD"),driverId:this.driverId});
				if(this.isPathset)
					this.changeIsPathset()
			},
			toPtah(v){
				mappath.car.to(v);
			},
			changePayspeed(v){
				if(v<=10&&v>0){
					this.payspeed = v;
					this.changeSpeed(v);
				}

			},
			changeSpeed(v){
				if(mappath){
					mappath.car.speed = v;
				}
			},
			playPath(){
				this.isPlay = !this.isPlay;

				if(this.isPlay&&this.playbarValue===this.playbarMax){
					this.playbarValue = 0;
					mappath.car.reset();
				}
				this.isPlay?mappath.car.play():mappath.car.pause();
				if(this.isPlay){
					mappath.pathSimplifierIns.setFitView();
					// map.setCenter(mappath.car.marker.getPosition());
					// mappath.car.infowindow.show();
				}else{
					// mappath.car.infowindow.show();
				}
				if(this.isPlay&&this.isLeftopen) this.changeLeftOpen();
			},
			resetPath(){
				this.isPlay = false;
				this.playbarValue = 0;
				mappath.car.to(0);
				mappath.car.reset();
				chart.series[0].setData(this.pathdata.gps.map((a,i)=>[i,a.gpsSpeed]))
			},
			selectfilterCar(v){
				this.filterCar = v;
			},
			changeLeftOpen(){
				this.isLeftopen = !this.isLeftopen;
				if(this.isLeftopen&&mappath&&this.isPlay){
					this.playPath();
				}
			},
			changeRightOpen(v){
				this.isRightopen = v;
			},
			daterangeChange(times) {
				this.searchForm.times = times;
			},
			resetForm(v){
				if(!v){
					this.form = {};
					this.oform = {};
					this.$refs.form.resetFields();
				}
			},
			openModel(){
				if(mappathset.getFormData()&&mappathset.getFormData().length>1){
					this.modal = true;
					if(this.modalType === 2)
						this.loadView({elecFenceId :this.selectRailId});
				}else{
					this.$Message.error("请绘制正确的线路")
				}
			},
			closeModal(){
				this.modal = false;
			},
			changeIsPathset(){
				this.isPathset = !this.isPathset;
				if(!this.isPathset)
					this.$nextTick(()=>chart.setSize());
			},
			async submit(){
				let flag = await this.$refs.form.validate();

				if(flag){
					this.oform.detailJson = JSON.stringify(mappathset.getFormData());
					let res = await this.add(this.oform);
					if(res.data.success){
						this.closeModal();
        		this.$Message.success('新增成功');
        		this.isPathset = false;
        		if(chart)
							this.$nextTick(()=>chart.setSize());
					}else{
						this.$Message.error(res.data.msg);
					}
				}
			},
			changeCar(v){
				this.driverId = v.value;
				this.plateNumer = v.label;
			}
		}
	}
</script>
